<template>
  <swiper class="swiper-wrap" @click="handleClosePreview" :options="swiperOption" >
    <swiper-slide v-for="(item, index) of imagesData" class="slide" :key="index">
				<img :src="item" >
		</swiper-slide>
  </swiper>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper' 
  export default {
    name: 'y-imagePreview',
    components: {
      swiper,
      swiperSlide
    },
    props: {
			imagesData: {
				type: Array,
				default: []
			},
			initialSlide: Number
		},
		data() {
			return {
				swiperOption: {
					initialSlide: this.initialSlide
				}
			}
		},
		methods: {
			handleClosePreview() {
				this.$emit('handleClosePreview');
			}
		},
		created() {
			// console.log('imagesData', this.imagesData);
		}
  }

</script>
<style scoped  type="text/css">
	@import "../../../css/var.css";
	.swiper-wrap {
		/* position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0; */
		background: rgba(0,0,0,0.5);
		z-index: 99;
		& .slide {
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
